<template>
  <view class="page">
    <Header> </Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'主页-写作突破-攻略/模版'">
        </Breadcrumb>
        <RouterTabs :list="routerList" :current="0"> </RouterTabs>
        <view class="content">
          <view class="box">
            <view class="left">
              <CompositionList
                @select="handleCompositionSelect"
              ></CompositionList>
            </view>
            <view class="right">
              <view class="tabs">
                <view
                  class="tabs_item"
                  :class="{ active: type === '1' }"
                  @click="typeChange('1')"
                >
                  <text>攻略</text>
                </view>
                <view
                  class="tabs_item"
                  :class="{ active: type === '2' }"
                  @click="typeChange('2')"
                >
                  <text>模版</text>
                </view>
              </view>
              <view class="text">
                <view class="text_content" v-show="type === '1'">
                  <view
                    class="text_box"
                    v-if="method"
                    v-html="method.methodContent"
                  ></view>
                </view>
                <view class="text_content" v-show="type === '2'">
                  <view
                    class="text_box"
                    v-if="template"
                    v-html="template.templateContent"
                  ></view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getStore } from "@/libs/storage";
import { getMethodTemplate } from "@/api/composition";
export default {
  components: {},
  data() {
    return {
      routerList: [
        {
          name: "攻略/模版",
          url: "pages/composition/compositionStrategy",
        },
        {
          name: "点亮单词/短语",
          url: "pages/composition/compositionPhrase",
        },
        {
          name: "亮点句型",
          url: "pages/composition/compositionSentence",
        },
        {
          name: "学习报告",
          url: "pages/composition/compositionReport",
        },
      ],
      period: getStore({
        name: "composition_period",
      }),
      type: "1",
      compositionItem: {},
      method: null,
      template: null,
    };
  },
  onLoad() {},
  methods: {
    typeChange(type) {
      this.type = type;
    },
    handleCompositionSelect(item) {
      this.compositionItem = item;
      this.getStrategy();
    },
    getStrategy() {
      let params = {
        typeId: this.compositionItem.id,
      };
      getMethodTemplate(params).then((res) => {
        this.method = res.data.method;
        this.template = res.data.template;
      });
    },
  },
};
</script>
<style scoped lang="scss">
@import "./compositionStrategy";
</style>
